<template>
    <el-container class="home-container">
        <!-- 头部 -->
        <el-header>
            <el-col :span="19"><span>his_cms管理系统</span></el-col>
            <el-col :span="1"><el-avatar :size="40" :src="circleUrl"></el-avatar></el-col>
            <el-col :span="2"><span>{{user.realName}} </span></el-col>
            <el-col :span="2"><el-button type="info" @click="logout">退出</el-button></el-col>
        </el-header>

        <!-- 页面的主体 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width='200px'>
                <!-- 侧边栏的菜单 -->
                <el-menu
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                unique-opened
                router
                :default-active="activePath"> 
                    <!--一级菜单  -->
                    <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
                        <!-- 一级菜单的模板 -->
                        <template slot="title">
                            <!-- 图标 -->
                            <i :class="iconsObject[item.id]"></i>
                            <!-- 文本内容 -->
                            <span>{{item.authName}}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item :index="subItem.path+''" v-for="subItem in item.children" :key="subItem.id" @click="saveState(subItem.path)">
                            <!-- 二级菜单模板 -->
                            <template slot="title">
                            <!-- 图标 -->
                            <i class="el-icon-location"></i>
                            <!-- 文本内容 -->
                            <span>{{subItem.authName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 主体结构 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            menuList:[
                {id:1,authName:"系统管理",children:[{path:"constatnt",authName:"常数管理"},{path:"user",authName:"用户管理"},{path:"department",authName:"科室管理"},{path:"registLevel",authName:"挂号级别管理"},{path:"settle",authName:"结算类别管理"},{path:"dise",authName:"诊断目录管理"},{path:"fmedItem",authName:"非药品收费管理"},{path:"scheduling",authName:"排班管理"}]}
            ],
            iconsObject:{
                '1':'iconfont icon-user',
                '2':'iconfont icon-tijikongjian',
                '3':'iconfont icon-shangpin',
                '4':'iconfont icon-danju',
                '5':'iconfont icon-baobiao',
            },
            user:'',
            activePath:''
        }
    },
    //生命周期函数created()
    created(){
            this.user = this.$getSessionStorage('user');
    },
    methods: {
        logout() {
            // 清除sessionStorage中的token
            this.$removeSessionStorage('token');
            this.$router.push('/login');
        },
        //保存链接的状态
        saveState(activePath) {
            //要将activePath保存到sesstionStorage中
            this.$setSessionStorage('activePath',activePath);
            this.activePath = activePath
        }
    }
}
</script>

<style lang="less" scoped>
    .home-container {
        height: 100%;
    }

    .el-header {
        background-color:#303133;
        display: flex;
        justify-content: space-between;
        // padding-left: 0;
        align-items: center;
        color: #ffffff;
        font-size: 20px;
    }

    .el-aside {
        background-color: #545c64;
        .el-menu{
            border-right:none;
        }
    }

    .el-main {
        background-color: #F2F6FC;
    }
    .toggle-button {
        background-color: cadetblue;
        font-size: 10px;
        color: #ffffff;
        line-height: 23px;
        text-align: center;
        letter-spacing: 2px;
        cursor: pointer;
    }
    .iconfont{
        margin-right: 8px;
    }
</style>